<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Scroll Content (jquery.scrollContent.js)</title>
 <script type="text/javascript" src="../jquery-1.4.3.min.js"></script>
 <script type="text/javascript" src="jquery.popupWindow.js"></script>

<style>
*{margin:0;padding:0;}
h3{ color:#666666;margin-top:10px;padding:10px 5px; background:#FFFFCC;}
h4{margin-top:10px;padding:10px 5px; background:#eee;}
h5{margin-top:20px;}
.nav{text-align:right;padding:0;margin:0;}

.clearFloat { clear: left; overflow:hidden; line-height:0; height:0; line-height:0; }
.floatLeft { float:left; }
.scrollContentBorder { border: solid 1px #ccc; padding:10px; }
.scrollContentContainer ul li {  width:150px; height:140px; text-align:center; margin-top:4px; /*border:1px solid #e8e8e8*/ }
.scrollContentContainer ul li img {  border: solid 1px #ccc; margin:0 auto; display:block; }
.scrollContentContainer ul li p { text-align:center; }
.scrollContentContainer { margin:20px; }

</style>

</head>
<body style="padding:10px;">

	<p class="nav"><small><a href="https://jsskep.googlecode.com/svn/trunk/">Cssrain google SVN</a> | <a href="http://www.cssrain.cn">Cssrain blog</a></small></p>
	<h1>PopupWindow</h1>
	<h3>用法：$(selector).popupWindow({options});</h3>

	<h4>例子1：</h4>
	<div id="example1" class="tabContainer"> 
		<div><a href="http://www.google.cn" title="google.cn" class="example1demo">open popup google.cn</a></div> 
		<script type="text/javascript"> 
		$('.example1demo').popupWindow({ 
			height:500, 
			width:800, 
			top:50, 
			left:50 
		}); 
		</script>
	</div>

	<hr /><!--/////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

	<h4>例子2：</h4>
	<div id="example2" class="tabContainer">
		<div><a href="http://www.google.com" title="google.com" class="example2demo" name="windowX">open google.com</a> 
		 | <a href="http://www.baidu.com" title="baidu.com" class="example2demo" name="windowX">使用同一个窗口打开baidu.com</a></div> 
		<script type="text/javascript"> 
		$('.example2demo').popupWindow({ 
			height:500, 
			width:800, 
			centerBrowser:1 
		}); 
		</script>
	</div>



	<hr /><!--/////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

	<h4>例子3：</h4>
		
	<div><a href="http://www.google.com"  class="example3demo" name="google">open google.com</a> 
	 | <a href="http://www.baidu.com"  class="example3demo" name="baidu">使用不同窗口打开baidu.com，并处于屏幕中间</a></div> 
	<script type="text/javascript"> 
	$('.example3demo').popupWindow({ 
		height:500, 
		width:800, 
		centerScreen:1 
	}); 
	</script>
	
	
	<hr /><!--/////////////////////////////////////////////////////////////////////////////////////////////////////////////-->

	<h4>例子4：</h4>
	<div><button class="example4demo">open window</button></div> 
	<script type="text/javascript"> 
	$('.example4demo').popupWindow({ 
		height:500, 
		width:800, 
		windowURL:'http://code.google.com/', 
		centerScreen:1 ,
		windowName:'swip' 
	}); 
	</script>




	<h5><a href="http://swip.codylindley.com/popupWindowDemo.html">popupWindow</a></h5>


</body>
</html>

 